<template>
  <div class="app-container table-content">
    <div class="filter-container" style="margin: 10px 0">
      <el-input placeholder="标题" style="width: 200px" class="filter-item"></el-input>
      <el-select placeholder="重要性" clearable style="width: 90px" class="filter-item">
        <el-option>1</el-option>
      </el-select>
      <el-select placeholder="类型" clearable class="filter-item" style="width: 130px">
        <el-option>1</el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-search">搜索</el-button>
      <el-button class="filter-item" style="margin-left: 10px" type="primary" icon="el-icon-edit"> 添加 </el-button>
      <el-button class="filter-item" :loading="downloadLoading" type="primary" icon="el-icon-download" @click="handleDownload"> 导出 </el-button>
    </div>
    <!-- 头部end -->
    <!-- table的列表数据 start -->
    <el-table v-loading="listLoading" border fit highlight-current-row style="width: 100%" :data="tablelist" @sort-change="sortChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="序号" sortable="custom" align="center" width="80" prop="id">
        <template #default="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <!-- 时间 -->
      <el-table-column label="时间" width="150px" align="center">
        <template #default="{ row }">
          <span>{{ parseTimeChange(row.timestamp) }}</span>
        </template>
      </el-table-column>
      <!-- 标题 -->
      <el-table-column label="标题" min-width="150px" align="center">
        <template #default="{ row }">
          <span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
        </template>
      </el-table-column>
      <!-- 作者 -->
      <el-table-column label="作者" width="150px" align="center">
        <template #default="{ row }">
          <span>{{ row.author }}</span>
        </template>
      </el-table-column>
      <!-- 重要性 -->
      <el-table-column label="重要性" width="150px" align="center">
        <template #default="{ row }">
          <el-rate disabled v-model="row.importance" />
        </template>
      </el-table-column>
      <!-- 阅读数 -->
      <el-table-column label="阅读数" width="150px" align="center">
        <template #default="{ row }">
          <span class="link-type">{{ row.pageviews }}</span>
        </template>
      </el-table-column>
      <!-- 状态 -->
      <el-table-column label="状态" width="150px" align="center">
        <template #default="{ row }">
          <el-tag>
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template #default="{ row }">
          <el-button type="primary" size="mini" @click="handleUpdate(row)"> 编辑 </el-button>
          <!-- <el-button v-if="row.status!='published'" size="mini" type="success">
            {{ $t('table.publish') }}
          </el-button> -->
          <el-button size="mini"> 草稿 </el-button>
          <el-button size="mini" type="danger"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- end -->
    <!-- 分页 -->
    <!-- <pagination v-show="total > 0" :total="total" :page="listQuery.page" :limit="listQuery.limit" @pagination="getList" /> -->
    <el-pagination
      :total="tablelist.length"
      :page-size="listQuery.limit"
      :page-sizes="[10, 20, 30, 40]"
      layout="sizes, prev, pager, next,jumper"
      v-model:currentPage="listQuery.page"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
  import { reactive, onMounted, toRefs } from "vue";
  import { export_json_to_excel, export_table_to_excel } from "@/vendor/Export2Execl.js";
  import { parseTime } from "@/utils/date.js";
  export default {
    name: "ComplexTable",
    components: {
      // Pagination,
    },
    setup() {
      const state = reactive({
        // tablelist: [],
        tablelist: Array.from({ length: 50 }).map((_, index) => ({
          index,
          id: index,
          author: "zenos",
          pageviews: parseInt(Math.random() * 1000),
          timestamp: new Date().getTime(),
          importance: parseInt(Math.random() * 5),
          status: "draft",
          title: "Dyuftpperi Ibco Veqtza Mhicl Iqyhormp",
          type: "CN",
        })),
        total: 100,
        value: null,
        listQuery: {
          page: 1,
          limit: 10,
          importance: undefined,
          title: undefined,
          sort: "+",
        },
        downloadLoading: false,
      });
      onMounted(() => {});
      const parseTimeChange = (time) => {
        if (time) {
          return parseTime(time);
        }
      };
      const handleDownload = () => {
        // 导出数据
        state.downloadLoading = true;
        // import("@/vendor/Export2Expcel").then((excel) => {
        //   const tHeader = ["timestamp", "title", "type", "importance", "status"];
        //   const filterVal = ["timestamp", "title", "type", "importance", "status"];
        //   const data = formatJson(filterVal);
        //   excel.export_json_to_execl({
        //     header: tHeader,
        //     data,
        //     fileName: "zenos属所有",
        //   });
        //   state.downloadLoading = false;
        // });
        //
        const tHeader = ["timestamp", "title", "author", "importance", "status"];
        const filterVal = ["timestamp", "title", "author", "importance", "status"];
        const data = formatJson(filterVal);
        console.log(data);
        export_json_to_excel({
          header: tHeader,
          data,
          filename: "zenos属所有",
        });
        state.downloadLoading = false;
      };
      const formatJson = (filterVal) => {
        return state.tablelist.map((v) =>
          filterVal.map((j) => {
            if (j === "timestamp") {
              return parseTime(v[j]);
            } else {
              return v[j];
            }
          })
        );
      };
      const handleCurrentChange = (val) => {
        // 改变当前的页码
        state.listQuery.page = val;
        console.log(val);
      };
      const handleSizeChange = (val) => {
        // 改变数据的大小
        state.listQuery.limit = val;
        console.log(val);
      };
      const sortChange = (data) => {
        // 排序
        const { order, prop } = data;
        if (prop === "id") {
          sortByID(order);
        }
      };
      const sortByID = (order) => {
        if (order === "ascending") {
          state.listQuery.sort = "+";
        } else {
          state.listQuery.sort = "-";
        }
        state.listQuery.page = 1;
        var list = JSON.parse(JSON.stringify(state.tablelist));
        list = list.sort((a, b) => {
          if (state.listQuery.sort == "-") {
            return b["id"] - a["id"];
          } else {
            return a["id"] - b["id"];
          }
        });
        state.tablelist = list;
      };
      const handleUpdate = (row, index) => {};
      return {
        ...toRefs(state),
        sortChange,
        handleUpdate,
        handleCurrentChange,
        handleSizeChange,
        handleDownload,
        formatJson,
        parseTimeChange,
      };
    },
  };
</script>

<style lang="scss">
  .table-content {
    .el-select-dropdown {
      top: -200px;
    }
  }
</style>
